<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/style.css">
<script src="${pageContext.request.contextPath }/js/index.js"></script>
<title>Dish Information</title>
<%  
    response.setHeader("Cache-Control","no-store");  
    response.setDateHeader("Expires", 0);  
    response.setHeader("Pragma","no-cache");   
%>
</head>
<body>
<div class="home-container" id="top">

    <div class="top-nav">
        <div class="mid-nav">
            <a href="${pageContext.request.contextPath}/index" class="header-title">
                <span>Shopping</span>
            </a>
			<c:if test="${account == null }">
                <div class="links">
                    <a href="${pageContext.request.contextPath }/login.jsp" class="login-link">登录</a>
                    <span class="mid-span"> | </span>
                    <a href="${pageContext.request.contextPath }/register.jsp" class="register-link">注册</a>
                </div>
            </c:if>
            <c:if test="${account != null }">
                <div class="index-welcome">
                    <span>欢迎您，${account.username}</span>
                    <a href="${pageContext.request.contextPath }/client/listOrder" class="login-link">查看订单</a>
                    <a href="${pageContext.request.contextPath }/client/account?action=logout" class="logout-link">注销</a>
                </div>
            </c:if>
        </div>
    </div>
    
    <div class="mid-nav">
        <div class="list-row" style="background-color: #f5f5f5;">

        <c:forEach var="dish" items="${dishMap}">
            <div class="col-2" style="border:1px solid #ccc;">
                <img src="/image/${dish.value.img}" class="dish-img">
                <div class="dish-info">
                    <h2>${dish.value.name }</h2>
                    <div class="info-inbox">
                    <span>${dish.value.price }</span>
                    <button type="button" class="btn" onclick="buyDish('${dish.value.id}','${dish.value.name}','${dish.value.price}')">+</button>
                    </div>
                </div>
            </div>buyDish(dish.value)
              </c:forEach>
            
        </div>
    </div>
    
    <div class="right-box">
        <h2 style="color: #ffffff;"> Cart</h2>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>DishName</th>
                <th>Number</th>
                <th>Price</th>
            </tr>
            </thead>
            <tbody id="cartBody"><c:forEach var="cart" items="${cartList }"><tr id="${cart.did}"><td>${cart.dish.name}</td><td><input value="${cart.count}" onkeyup="changePrice('${cart.did}','${cart.dish.price}')"/></td><td>${cart.dish.price * cart.count}</td></tr><c:set value="${sum + cart.dish.price * cart.count}" var="sum" /></c:forEach></tbody>

            <tfoot>
            <tr>
                <td>Total:</td>
                <td id="total">${sum }</td>
                <td><a href="${pageContext.request.contextPath}/client/order?action=checkOut"><button type="button" class="btn">Check Out</button></a></td>
            </tr>
            </tfoot>
        </table>

    </div>
</div>
</body>
</html>